<template>
    <view class="container health-page">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="title">健康服务</view>
            <view class="right">
                <u-icon name="bell" size="32" color="#333" @click="goReminders"></u-icon>
            </view>
        </view>
        
        <!-- 健康概览卡片 -->
        <view class="health-card">
            <view class="card-header">
                <view class="user">
                    <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
                    <view class="info">
                        <view class="name">{{userInfo.name}}</view>
                        <view class="greeting">{{greeting}}</view>
                    </view>
                </view>
                <view class="more" @click="goHealthRecord">
                    <text>查看档案</text>
                    <u-icon name="arrow-right" size="24" color="#1890FF"></u-icon>
                </view>
            </view>
            
            <view class="indicators">
                <view class="indicator-item" @click="goHealthDetail('bloodPressure')">
                    <view class="value">{{healthData.bloodPressure}}</view>
                    <view class="label">
                        <text>血压</text>
                        <view class="status" :class="healthStatus.bloodPressure">{{healthStatus.bloodPressure === 'normal' ? '正常' : '异常'}}</view>
                    </view>
                </view>
                <view class="indicator-item" @click="goHealthDetail('bloodSugar')">
                    <view class="value">{{healthData.bloodSugar}}</view>
                    <view class="label">
                        <text>血糖</text>
                        <view class="status" :class="healthStatus.bloodSugar">{{healthStatus.bloodSugar === 'normal' ? '正常' : '异常'}}</view>
                    </view>
                </view>
                <view class="indicator-item" @click="goHealthDetail('heartRate')">
                    <view class="value">{{healthData.heartRate}}</view>
                    <view class="label">
                        <text>心率</text>
                        <view class="status" :class="healthStatus.heartRate">{{healthStatus.heartRate === 'normal' ? '正常' : '异常'}}</view>
                    </view>
                </view>
                <view class="indicator-item" @click="goHealthDetail('weight')">
                    <view class="value">{{healthData.weight}}</view>
                    <view class="label">
                        <text>体重</text>
                        <view class="status" :class="healthStatus.weight">{{healthStatus.weight === 'normal' ? '正常' : '异常'}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 健康服务功能区 -->
        <view class="service-section">
            <view class="section-title">健康服务</view>
            <view class="service-grid">
                <view class="service-item" @click="goConsultation">
                    <image src="/static/images/service-consultation.png" mode="aspectFit"></image>
                    <text>在线问诊</text>
                </view>
                <view class="service-item" @click="goHealthQA">
                    <image src="/static/images/service-qa.png" mode="aspectFit"></image>
                    <text>健康问答</text>
                </view>
                <view class="service-item" @click="goHealthKnowledge">
                    <image src="/static/images/service-knowledge.png" mode="aspectFit"></image>
                    <text>健康知识</text>
                </view>
                <view class="service-item" @click="goCourse">
                    <image src="/static/images/service-course.png" mode="aspectFit"></image>
                    <text>健康课程</text>
                </view>
                <view class="service-item" @click="goMedicalRecords">
                    <image src="/static/images/service-records.png" mode="aspectFit"></image>
                    <text>就诊记录</text>
                </view>
                <view class="service-item" @click="goMedicationRecords">
                    <image src="/static/images/service-medication.png" mode="aspectFit"></image>
                    <text>用药记录</text>
                </view>
                <view class="service-item" @click="goHealthCalculator">
                    <image src="/static/images/service-calculator.png" mode="aspectFit"></image>
                    <text>健康计算</text>
                </view>
                <view class="service-item" @click="goHospitalMap">
                    <image src="/static/images/service-hospital.png" mode="aspectFit"></image>
                    <text>附近医院</text>
                </view>
                <view class="service-item" @click="goMore">
                    <image src="/static/images/service-more.png" mode="aspectFit"></image>
                    <text>更多服务</text>
                </view>
            </view>
        </view>
        
        <!-- 健康提醒 -->
        <view class="reminder-section" v-if="reminders.length > 0">
            <view class="section-title">健康提醒</view>
            <view class="reminder-list">
                <view 
                    class="reminder-item" 
                    v-for="(item, index) in reminders" 
                    :key="index"
                    :class="['reminder-type-' + item.type]"
                    @click="viewReminder(item)"
                >
                    <view class="icon">
                        <u-icon :name="getReminderIcon(item.type)" size="32" :color="getReminderColor(item.type)"></u-icon>
                    </view>
                    <view class="content">
                        <view class="title">{{item.title}}</view>
                        <view class="time">{{item.time}}</view>
                    </view>
                    <view class="action">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="more-reminder" @click="goReminders">
                    <text>查看更多提醒</text>
                </view>
            </view>
        </view>
        
        <!-- 健康资讯 -->
        <view class="news-section">
            <view class="section-header">
                <view class="section-title">健康资讯</view>
                <view class="more" @click="goHealthKnowledge">
                    <text>更多</text>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>
            <view class="news-list">
                <view 
                    class="news-item" 
                    v-for="(item, index) in newsList" 
                    :key="index"
                    @click="viewArticle(item)"
                >
                    <view class="content">
                        <view class="title">{{item.title}}</view>
                        <view class="meta">
                            <text>{{item.category}}</text>
                            <text>{{item.views}}阅读</text>
                        </view>
                    </view>
                    <image class="cover" :src="item.cover" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        
        <!-- 自定义tabBar -->
        <custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showCustomTabBar: true, // 显示自定义TabBar
            userInfo: {
                name: '张三',
                avatar: '/static/images/avatar.png'
            },
            greeting: '你好',
            healthData: {
                bloodPressure: '120/80',
                bloodSugar: '5.5',
                heartRate: '75',
                weight: '65'
            },
            healthStatus: {
                bloodPressure: 'normal',
                bloodSugar: 'normal',
                heartRate: 'normal',
                weight: 'normal'
            },
            reminders: [
                {
                    id: 1,
                    title: '血压测量提醒',
                    time: '今天 10:00',
                    type: 'blood-pressure'
                },
                {
                    id: 2,
                    title: '服药提醒',
                    time: '今天 12:00',
                    type: 'medication'
                },
                {
                    id: 3,
                    title: '体重记录提醒',
                    time: '今天 20:00',
                    type: 'weight'
                }
            ],
            newsList: [
                {
                    id: 1,
                    title: '高血压患者的饮食指南',
                    category: '疾病预防',
                    views: 1245,
                    cover: '/static/images/article-1.jpg'
                },
                {
                    id: 2,
                    title: '每天一个苹果，疾病远离我',
                    category: '健康饮食',
                    views: 876,
                    cover: '/static/images/article-2.jpg'
                },
                {
                    id: 3,
                    title: '糖尿病患者如何科学控制血糖',
                    category: '疾病管理',
                    views: 765,
                    cover: '/static/images/article-3.jpg'
                }
            ]
        }
    },
    onLoad() {
        // 隐藏原生TabBar
        uni.hideTabBar();
    },
    created() {
        this.greeting = this.getGreeting();
    },
    methods: {
        getGreeting() {
            const hour = new Date().getHours()
            if (hour < 6) {
                return '早上好'
            } else if (hour < 12) {
                return '上午好'
            } else if (hour < 14) {
                return '中午好'
            } else if (hour < 18) {
                return '下午好'
            } else {
                return '晚上好'
            }
        },
        goReminders() {
            uni.navigateTo({
                url: '/pages/health/reminders'
            })
        },
        goHealthRecord() {
            uni.navigateTo({
                url: '/pages/health/record'
            })
        },
        goHealthDetail(type) {
            uni.navigateTo({
                url: `/pages/health/indicator-detail?type=${type}`
            })
        },
        goConsultation() {
            uni.navigateTo({
                url: '/pages/consultation/index'
            })
        },
        goHealthQA() {
            uni.navigateTo({
                url: '/pages/health/qa'
            })
        },
        goHealthKnowledge() {
            uni.navigateTo({
                url: '/pages/health/knowledge'
            })
        },
        goCourse() {
            uni.navigateTo({
                url: '/pages/health/course'
            })
        },
        goMedicalRecords() {
            uni.navigateTo({
                url: '/pages/health/records'
            })
        },
        goMedicationRecords() {
            uni.navigateTo({
                url: '/pages/health/medication'
            })
        },
        goHealthCalculator() {
            uni.navigateTo({
                url: '/pages/health/calculator'
            })
        },
        goHospitalMap() {
            uni.navigateTo({
                url: '/pages/health/hospital-map'
            })
        },
        goMore() {
            uni.navigateTo({
                url: '/pages/health/more'
            })
        },
        getReminderIcon(type) {
            switch (type) {
                case 'blood-pressure':
                    return 'heart'
                case 'medication':
                    return 'medicine'
                case 'weight':
                    return 'scale'
                default:
                    return 'bell'
            }
        },
        getReminderColor(type) {
            switch (type) {
                case 'blood-pressure':
                    return '#FF4D4F'
                case 'medication':
                    return '#1890FF'
                case 'weight':
                    return '#52C41A'
                default:
                    return '#FAAD14'
            }
        },
        viewReminder(reminder) {
            uni.navigateTo({
                url: `/pages/health/reminder-detail?id=${reminder.id}`
            })
        },
        viewArticle(article) {
            uni.navigateTo({
                url: `/pages/health/article-detail?id=${article.id}`
            });
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    padding-bottom: 40rpx;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .health-card {
        margin: 20rpx 30rpx;
        padding: 30rpx;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            
            .user {
                display: flex;
                align-items: center;
                
                .avatar {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
                
                .info {
                    .name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 6rpx;
                    }
                    
                    .greeting {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
            
            .more {
                display: flex;
                align-items: center;
                
                text {
                    font-size: 28rpx;
                    color: #1890FF;
                    margin-right: 6rpx;
                }
            }
        }
        
        .indicators {
            display: flex;
            justify-content: space-between;
            
            .indicator-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .value {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 10rpx;
                }
                
                .label {
                    display: flex;
                    align-items: center;
                    
                    text {
                        font-size: 24rpx;
                        color: #999;
                        margin-right: 10rpx;
                    }
                    
                    .status {
                        font-size: 20rpx;
                        padding: 2rpx 8rpx;
                        border-radius: 10rpx;
                        
                        &.normal {
                            color: #52C41A;
                            background-color: #F6FFED;
                        }
                        
                        &.abnormal {
                            color: #FF4D4F;
                            background-color: #FFF1F0;
                        }
                    }
                }
            }
        }
    }
    
    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
    }
    
    .service-section {
        padding: 30rpx;
        
        .service-grid {
            display: flex;
            flex-wrap: wrap;
            
            .service-item {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 30rpx;
                
                image {
                    width: 100rpx;
                    height: 100rpx;
                    margin-bottom: 10rpx;
                }
                
                text {
                    font-size: 24rpx;
                    color: #333;
                }
            }
        }
    }
    
    .reminder-section {
        padding: 0 30rpx 30rpx;
        
        .reminder-list {
            background-color: #fff;
            border-radius: 10rpx;
            padding: 20rpx;
            
            .reminder-item {
                display: flex;
                align-items: center;
                padding: 20rpx;
                border-radius: 10rpx;
                margin-bottom: 20rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .icon {
                    width: 80rpx;
                    height: 80rpx;
                    background-color: rgba(0, 0, 0, 0.05);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20rpx;
                }
                
                .content {
                    flex: 1;
                    
                    .title {
                        font-size: 28rpx;
                        color: #333;
                        margin-bottom: 6rpx;
                    }
                    
                    .time {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
            
            .more-reminder {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20rpx;
                
                text {
                    font-size: 28rpx;
                    color: #1890FF;
                }
            }
        }
    }
    
    .news-section {
        padding: 0 30rpx 30rpx;
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .more {
                display: flex;
                align-items: center;
                
                text {
                    font-size: 28rpx;
                    color: #999;
                    margin-right: 6rpx;
                }
            }
        }
        
        .news-list {
            .news-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #fff;
                border-radius: 10rpx;
                padding: 20rpx;
                margin-bottom: 20rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .content {
                    flex: 1;
                    margin-right: 20rpx;
                    
                    .title {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    
                    .meta {
                        display: flex;
                        
                        text {
                            font-size: 24rpx;
                            color: #999;
                            margin-right: 20rpx;
                            
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                    }
                }
                
                .cover {
                    width: 160rpx;
                    height: 120rpx;
                    border-radius: 10rpx;
                }
            }
        }
    }
}
</style> 